Chapter 5: JavaScript for Kids
It may be hard to believe, but there was a time when there was no internet! And before that, no computers either! It’s probably really hard to imagine a world without the two, but people used to exist and get by with fewer electronics.
Before the invention of cellphones, people used to communicate via telephone or by writing letters and sending them through the post. Before online shopping, people had to physically go to the shops and kids had to have their friends in the room in order to play TV or computer games together.
With time, all those things changed. Things became faster and easier to do, and we have computers to thank for that. A computer is a gadget that takes different kinds of information and processes it, then gives us an answer. It works the same way as a calculator. You tell the calculator the sum you want it to work out and it gives you an answer.
Computers work with Operating systems. An operating system is a form of software that basically runs the computer. It controls the hardware by taking information in and giving information out. It is also responsible for the connection between us, the users, and the computer.
These days, most people use computers to get on to the internet. The internet is a network that connects millions of computers around the world. There are so many websites that we can’t even count. The thing that makes these websites look cool and do amazing things is JavaScript.
JavaScript is a language that we use to tell the computer what to do and how to do it. When you type something on your keyboard or scroll around a page with your mouse, the web page you are using responds to that. That’s because of JavaScript.
As amazing as JavaScript is, you can’t use it on its own to build your website. Websites are built using three languages. HTML, CSS and JavaScript.
HTML lets you put content on your webpage. So all the things you can see, like text and pictures.
CSS takes the content on your page and changes how it looks. So with CSS you can make your text and pictures big or small. You can change colors that appear on your page too !
And lastly, JavaScript tells the content on your page how to behave. That means that it can make your text or pictures move around, and it can even add animation.
HTML and CSS
HTML is really easy to learn. It’s where some of the most successful programmers and software developers started, and who knows? You could be the next Mark Zuckerberg!
HTML stands for Hypertext Markup Language. Hypertext describes the words or pictures on your web page that are hyperlinks. A hyperlink is something you can click on that takes you either to a different page or to a different part of the page you are already on. Markup Language is a collection of letters called tags that tell our web page how it should look.
HTML can be written in the notepad app on your computer.
In order to create a tag, we put them inside brackets that look like this <>. Some of the most common tags are <h> for heading, <p> for paragraph and <img> for images.
Tags can’t be alone, they always need something in between them. The thing we put inside the tag is called content. The content is what actually shows up on your web page. We can think of the tags like ‘the boss’ because the content will always do what the tag says. Here’s how:
At the top of your web page, you’re going to want to have a heading. Your main heading is going to be called <h1> so that the computer knows that it goes at the very top of your web page. Your heading can be whatever you want it to be, but for today it’s going to be ‘I am smart’. Once you put it inside the tags it’s going to look like this: <h1>I am smart</h1>. The two tags show where your heading should start and stop.
CSS stands for Cascading Style Sheets. Cascading means things that happen in a sequence, or one after the other. If we think of it like a waterfall, styles can fall from one sheet to another. This makes it possible for lots of different styles to appear on the same HTML sheet and then on a webpage. Style sheets are files that have font and styling settings.
Important JavaScript Terms
We can write JavaScript from scratch, but we don’t have to. There are coding libraries that exist to make it easier to write script. A coding library is a collection of code that has already been written. Most coding libraries are open source, which means they are free to download and use. An example of a coding library is JQuery.
In JQuery’s collection of code you will find:
Variables–We can liken a variable to a case filled with something. Variables hold one word or number at a time and can be sorted into one of three parts; type, name and value.
Keywords–Keywords are words with special meanings that have been set aside by programmers.
Functions–Are words within the script that we can use to get a task done
Parameters–Sometimes functions need to have a bit of extra information in them so they can perform properly. That extra information is called a parameter. Sometimes they are called arguments too.
Arrays–Arrays are like a bigger box for variables. They take variables that are alike and group them together.
Data Types in JavaScript
A language is something people use to communicate. All Languages have words that are unique to them. The same goes for programming languages. They each compose their data a certain way. JavaScript has Primitive values and Objects.
Primitive Values are forms of data that cannot change. In JavaScript there are seven:
● Number type
The number type is used to represent all numbers. It includes integers and floating point values. Floating point values are numbers that have fractions.
● BigInt type
BigInt is short for Big Integer. An integer is a whole number without fractions. 5 is an integer but 5.5 is not. This data type was created for JavaScript in early 2020 because there was a problem with the number data type. It didn’t have a number big enough for programmers to use, so in some situations they had problems when coding.
● Null type
Null is the value we use to show that there is no object. In real life, Imagine if you really wanted a glass of milk. You walk over to the fridge, grab a carton of milk and start to pour into your glass, but nothing comes out. Your carton of milk has a null value because it’s empty.
● Undefined type
We can compare Undefined to something that is unclear. A variable that can’t be identified by its characteristics becomes undefined in JavaScript. A lot of people are unsure what the difference between Null and Undefined is.
● Symbol type
A symbol is the newest primitive data type, it got added to JavaScript recently. Symbols have a unique value and cannot be recreated. We use them when we want to assign a specific value to an object so that it doesn’t clash with another object.
● String type
A string is a chain of symbols. It could include anything from letters to numbers.
● Boolean type
A Boolean is a value that can represent a true or a false statement. We usually use it with conditional statements when coding.
Objects are values that have their own characteristics and can be organized by type. We assign characteristics to an object by using variables.
Variables
The word variable means something that doesn’t stay the same, something that can change at any time. In JavaScript, Variables hold on to values that can be changed at any time. Because of this, variables cannot have the same name. Variables have declarations and definitions. A Declaration is the part of the code where the variable is before any action takes place. The definition is where the variable is placed once it has a value and a place in the code.
Arrays
In JavaScript, an Array is one variable that we can use to keep different elements. Keeping several items of the same kind together makes it easier to work out where each element is by adding an offset to a base value. A real life example would be if a teacher had all her students sitting at their desks. The teacher would be able to pinpoint any student by knowing what number desk they’re sitting at. It makes coding easier, because we can have access to a whole list of elements just by typing in one word.
Objects
Objects are words in your script that have characteristics and can be organized by type. Those characteristics are usually variables determined by the programmer.
Conditionals and Loops
Conditional statements work out what is happening in your JavaScript code and then use boolean phrases to decide on the outcome. So the outcome on a conditional statement will either be true or false. There are four types of conditional statements:
● The if statement
Runs a certain part of the code if the condition is true
● The else statement
Runs the part of the code related to else if the condition is false
● The else if statement
Gives and tests a new condition if the first if condition is false
● The switch-case statement
Gives a number of substitute code blocks to be carried out based on specific conditions
Loop statements help to keep your code short and sweet. Sometimes, you are going to have to perform the same action a number of times on your web application. If loop statements didn’t exist, a programmer would have to write the same line of code over and over again. There are three types of Loop statements:
● The while loop
The while loop is straightforward. The while loop carries out a conditional statement over and over again if the statement is true. As soon as the statement becomes false, the loop stops running.
● The for loop
The for loop is a bit more complex. It only runs a specific number of times and it’s made up of three parts:
- The Loop Initialization
This gets your code ready to receive a starting value. This happens before the loop starts.
- The Test Statement
Tests if a condition is true. If it is true, then the loop will run. If it’s not true, then the loop will not run.
- The Iteration Statement
Lets you increase or decrease the number of times your loop runs
● The for..in loop
As we read before, objects have properties. The for..in loop’s purpose is to loop through an object’s characteristics.
Functions
Functions are used to wrap a specific piece of your code so you can reuse it without having to type it out more than once. Sometimes a developer needs the same action to take place on different parts or pages of the same website. Functions can be broken down into three parts:
Function Statement
The function statement reveals a function. The function gets saved and only works when it is called for.
Function Expression
A function expression does not give the name of the function. The name can be left out of the line of code and create an anonymous function.
Function Declaration
Names a function with its special parameters
Three Ways to Write Your First Line of Code
The first way you can practice writing some code is to write it directly into the Browser. It’s really easy because you don’t need to set anything up and you can start off by trying out some simple comments.
● First, open your web browser and find the search box.
● Type in about:blank and click enter–Your browser tab should be empty.
● Click on the menu and choose tools or more tools depending on your browser.
● Choose Developer tools–A developer tag should appear.
● Click on Console.
● Type your first line of code!
Once you have gotten used to writing and using some basic HTML tags and content, you are going to need to be able to save your code and you might want to use lots of commands at the same time. For that you have to write your code in a simple text file and then send it to the browser so you can view it. Browsers accept files with the extension .html. You can create HTML files with Notepad in windows and with Textedit on Mac. Once you have written your code into the file, you need to change the format to HTML.
On Windows:
● Open Notepad
● Define the document type by typing in <!DOCTYPE html>
● Type in some tags and content e.g.:
<h1>I AM SMART</h1>
<p> I can code! </p>
● Click on file in the top left corner
● Click on Save as
● Look for: Save as type
● Click on the drop down menu and choose the .html file extension.
● Save your document
On Mac:
● Open Textedit
● Go to the very top of the page and click on preferences
● Choose the plain text option
● Define the document type
● Type in some tags and content
● Click save and type .html at the end of your document name
● Save your document
You have to be very careful, because you will be writing code all by yourself.
Another way you can write your code is with Special Code Editors. Special Code Editors know lots of programming languages and they have special features to help you write your code. They highlight different keywords and let you know when there is a syntax error. An editor that is available for free online is Visual Studio Code.
Now that you have a basic knowledge of HTML and JavaScript, challenge yourself and do even more research. By the end of your coding journey you should be able to create beautiful websites, build games and construct really cool mobile apps.